<template>
	<view class="box-content login-bg">
		<view class="login-content">
			<view class="login-title">
				登录享更多服务
			</view>
			<!-- 手机号一键登录 -->
			<view class="cell-phone-number" v-show="current == 0">
				<view class="cell-phone-number-hint">中国移动提供认证服务</view>
				<view class="phone-input">
					<view class="left-area-code">
						+86<image src="../../static/search/shaixuandown.png" mode=""></image>
					</view>
					<view class="center-lines"></view>
					<view class="phone">199 **** 3333</view>
				</view>
				<view class="login-btn" style="margin-top: 60rpx;margin-bottom: 22rpx;">
					一键登录
				</view>
				<view class="login-agreement">
					<view style="font-size: 36rpx;">
						<uni-icons @click="checked = !checked" :color="checked? '#EF5233':'#979797'"
							:type="checked?'checkbox-filled':'checkbox'" size="30"></uni-icons>
					</view>
					我已阅读并同意 <navigator url="/otherpages/agreement/userAgreement">《服务条款》</navigator>
					<navigator url="/otherpages/agreement/userAgreement">《隐私政策》</navigator>
					<navigator>《中国移动认证服务协议》</navigator>
				</view>
				<view class="else-login-btn" @click="clickElse">
					其他方式登陆
				</view>
			</view>

			<!-- 其他登录 -->
			<view class="else-login-way" v-show="current == 1">
				<view class="login-tyle-menu">
					<view class="item-login-type" @click="changeLogin(item)" v-for="(item,index) in typeList"
						:key="index">
						<view :class="loginData.scene == item.scene?'login-name selectstyle':'login-name'">{{item.name}}
						</view>
						<view v-show="loginData.scene == item.scene" class="lines"></view>
					</view>
				</view>
				<swiper @change="swiperChange" style="height: 290rpx;" :current="loginType">
					<swiper-item>
						<view class="phone-code">
							<view class="phone-input">
								<view class="left-area-code">
									+86<image src="../../static/search/shaixuandown.png" mode=""></image>
								</view>
								<view class="center-lines"></view>
								<input maxlength="11" adjust-position v-model="loginData.account" class="phone input-box-phone"
									placeholder-class="placeholderStyle" type="number" placeholder="请输入手机号码" />
							</view>

							<view class="phone-input">
								<input maxlength="6" adjust-position	 v-model="loginData.code" class="code-input" type="number"
									placeholder-class="placeholderStyle" placeholder="请输入验证码" />
								<button plain v-if="!isSend" class="sen-code-btn" @click="sendCode">{{sendcodetext}}</button>
								<view v-if="isSend" class="sen-code-btn success-send">{{sendcodetext}}</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="account-password">
							<view class="phone-input">
								<image class="account-icon" src="../../static/login/account.png" mode=""></image>
								<input maxlength="11" adjust-position	 v-model="loginData.account" class="phone input-box-phone"
									placeholder-class="placeholderStyle" type="number" placeholder="请输入手机号码" />
								<image @click="loginData.account = ''" class="clear-icon" src="../../static/login/clear.png" mode=""></image>
							</view>
							<!-- <uni-tooltip content="初始密码为登陆手机号" placement="top"> -->
								<view class="phone-input" style="margin-bottom: 0;">
									<image class="password-icon" src="../../static/login/nolook.png" mode=""></image>
									<input @focus="showHint" @blur="blur" class="phone input-box-phone" adjust-position	 :password="ispassword" v-model="loginData.password"
										type="safe-password" placeholder-class="placeholderStyle" placeholder="请输入密码" />
									<image class="look-icon" @click="ispassword = !ispassword"
										src="../../static/login/look.png" mode=""></image>
								</view>
							<!-- </uni-tooltip> -->
							<view class="hint-text" v-if="hint">初始密码为登陆手机号</view>
						</view>
					</swiper-item>
				</swiper>
				
				<button :disabled="isDisabled" @click="login" class="login-btn">
					立即登录
				</button>
				<view class="three-login">
					<image class="login-img" src="/static/login/weixin.png" mode="" @click="handleWechatLogin" v-if="isWechat">
					</image>
					
					<image v-if="isApple" class="login-img" src="/static/login/apple.png" @click="appleLogin">
					</image>
				</view>
				<view class="login-agreement" style="margin-top: 20rpx;">
					<view style="font-size: 30rpx;">
						<uni-icons @click="checked = !checked" :color="checked? '#EF5233':'#979797'"
							:type="checked?'checkbox-filled':'checkbox'" size="18"></uni-icons>
					</view>
					我已阅读并同意 <navigator url="/otherpages/agreement/userAgreement">《服务条款》</navigator>
					<navigator url="/otherpages/agreement/privacyAgreement">《隐私政策》</navigator>
					<!-- <navigator>《中国移动认证服务协议》</navigator> -->
				</view>
			</view>
		</view>
		
		
		<view class="slider flex_r_around" v-if="slider_show">
			<view class="block flex_c">
				<view class="title">
					拖动下方滑块完成验证
					<uni-icons type="close" color="#FFF" @click="slider_show = false"></uni-icons>
				</view>
				<view class="box flex_r_around">
					<liu-slider-verify ref="verify" @change="slideerChange"></liu-slider-verify>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let Base64 = require('js-base64').Base64
	var time = 60;
	let t1;
	export default {
		data() {
			return {
				current: 1, // 登录模块
				typeList: [{
					"name": "验证码",
					'scene': 'mobile',
					id: 0,
				}, {
					"name": "账号密码",
					'scene': 'account',
					id: 1,
				}],
				loginType: 0, //登录方式
				sendcodetext: "获取验证码",
				isDisabled: false,
				isSend: false,
				ispassword: true,
				loginData: {
					scene: "mobile",
					account: "",
					password: "",
					code: ""
				},
				checked: false,
				isApple:false,
				hint:false,
				cid:'',
				
				isWechat:false,
				
				slider_show:false,
			}
		},
		
		onLoad() {
			var that = this
			// #ifdef APP-PLUS
			if(this.$util.phoneType() == "ios"){
				uni.getSystemInfo({
					success: function (res) {
						if(that.$util.compareVersion(res.osVersion,'13.0.0')<0){
							that.isApple = false
						}else{
							that.isApple = true
						}
					}
				});
			}
			this.checkApp()
			uni.preLogin({
				provider: 'univerify',
				success:res=>{
					this.typeList.push({
						"name": "一键登录",
						id: 2
					})
				},
				fail:err=>{
					console.log(err);
				}
			})
			// #endif
			uni.getPushClientId({
				success:res=>{
					that.cid = res.cid
				}
			})
			
		},
		methods: {
			showHint(e){
				this.hint = true
			},
			blur(){
				this.hint = false
			},
			/**
			 * APP预登录
			 */
			preLogin(){
				uni.preLogin({
					provider: 'univerify',
					success(res){  //预登录成功
						// 显示一键登录选项
						// console.log(res)
					},
					fail(err){  // 预登录失败
						// console.log(err);
						// 不显示一键登录选项（或置灰）
				    // 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
					}
				})
			},
			appleLogin() {
				let that = this
				if (!this.checked) {
					this.$util.msg("请先确认并同意《服务条款》和《隐私协议》")
					return
				}
				
				uni.getProvider({
					//获取第三方登录类型
					service: 'oauth',
					success: function(res) {
						//判断为苹果登录
						if (res.provider.indexOf('apple')>=0) {
							uni.login({
								provider: 'apple',
								success: loginRes => {
									uni.getUserInfo({
										provider: 'apple',
										success: userInfoRes => {
											if(userInfoRes.userInfo.fullName.familyName){
												var username = userInfoRes.userInfo.fullName.familyName+''+userInfoRes.userInfo.fullName.giveName
											}else{
												var username =''
											}
											that.appleLoginFn(userInfoRes.userInfo.identityToken,username)
										}
									})
								},
								fail: err => {
									uni.showToast({
										title: '登录失败',
										icon: 'none'
									})
								}
							})
						}
					},
					fail: err => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
					}
				})
			},
			
			appleLoginFn(access_token,nickname){
				var that = this
				that.request.httpTokenRequest({
					url: "login/login",
					method: "post"
				}, {
					access_token:access_token,
					scene: 'ios',
					nickname:nickname,
					cid:that.cid
				}).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('token',res.data.token)
						if(!res.data.userInfo.mobile){
							uni.redirectTo({
								url: "/otherpages/bindPhone/bindPhone"
							})
						}else {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
						
					}
				
				}, error => {})
			},
			/**
			 * 微信授权登录
			 */
			handleWechatLogin() {
				if (!this.checked) {
					this.$util.msg("请先确认并同意《服务条款》和《隐私协议》")
					return
				}
				let that = this;
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event) {
						const {
							code
						} = event
						that.request.httpTokenRequest({
							url: "login/login",
							method: "post"
						}, {
							code: event.code,
							scene: 'app',
							cid:that.cid
						}).then(res => {
							if (res.code == 0) {
								uni.setStorageSync('token',res.data.token)
								if(!res.data.userInfo.mobile){
									uni.redirectTo({
										url: "/otherpages/bindPhone/bindPhone"
									})
								}else {
									uni.switchTab({
										url: "/pages/index/index"
									})
								}
								
							}

						}, error => {})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
						// console.log('err', err);
					}
				})
			},


			changeLogin(item) {
				if (item.id == 2) {
					// this.current = 0
					this.oneClickLogin()
				} else {
					this.loginType = item.id
					this.loginData.scene = item.scene
				}
			},
			swiperChange(e){
				this.loginType = e.detail.current
				if(this.loginType == 0){
					this.loginData.scene = 'mobile'
				}else if(this.loginType == 1){
					this.loginData.scene = 'account'
				}else{
					this.loginData.scene  = 'mobileAuth'
				}
			},
			clickElse() {
				this.current = 1
			},
			uniclodLogin(access_token, openid) {
				var that = this
				uniCloud.callFunction({
					name: 'login', // 你的云函数名称
					data: {
						access_token: access_token, // 客户端一键登录接口返回的access_token
						openid: openid // 客户端一键登录接口返回的openid
					}
				}).then(res => {
					that.loginData.scene = "mobileAuth"
					that.loginData.account = res.result.data.phoneNumber
					that.checked = true
					that.login()
					uni.hideLoading();
				}).catch(err => {
					// 处理错误
					// console.log("err----", err)
				})
			},
			oneClickLogin() {
				var that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (res.provider.includes('univerify')) {
							uni.login({
								provider: 'univerify',
								univerifyStyle: {
									'fullScreen': true,
									"authButton": {
										"normalColor": "#EF5233", // 授权按钮正常状态背景颜色 默认值：#3479f5  
										"highlightColor": "#EF5233", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
										"disabledColor": "#EF5233", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
										"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff  
										"title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”  
										"borderRadius": "24px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
									},
									"privacyTerms": {
										"defaultCheckBoxState": true, // 条款勾选框初始状态 默认值： true
										"isCenterHint": false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
										"uncheckedImage": "static/login/no-choose.png", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)   
										"checkedImage": "static/login/yes-choose.png", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)   
										"checkBoxSize": 14, // 可选 条款勾选框大小
										"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
										"termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3  
										"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
										"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
									},
								},
								
								success(res) { // 登录成功
									uni.showLoading({
										title: '加载中',
										mask:true
									});
									that.uniclodLogin(res.authResult.access_token, res.authResult.openid)
								},
								fail(res) { // 登录失败
									// console.log(res)
								}

							})
						} else {
							this.current = 1
						}
					}
				});

			},
			slideerChange(e){
				let that = this
				if(e.state){
					that.request.httpTokenRequest({
						url: "/index/getCode",
						method: "post"
					}, {}).then(res => {
						if (res.code == 0) {
							let code = Base64.decode(res.data.token)
							that.isSend = true
							that.request.httpTokenRequest({
								url: "index/sendSms",
								method: "post"
							}, {
								scene: "101",
								mobile: that.loginData.account,
								code: code
							}).then(function(data) {
								that.slider_show = false
								if (data.code == 0) {
									t1 = setInterval(() => {
										if (time <= 0) {
											time = 60
											that.sendcodetext = '重新获取'
											that.isSend = false
											clearInterval(t1)
											
										} else {
											--time
											that.sendcodetext = time + 's'
										}
									}, 1000)
								} else {
									that.$util.msg(data.msg)
									that.isSend = false
									clearInterval(t1)
								}
							})
						}
					}, error => {})
				}
			},
			sendCode() {
				if (this.$util.phoneVerify(this.loginData.account)) {
					this.slider_show = true
				}
			},
			// 判断第三方程序(微信) 是否安装
			checkApp(){
			    if(plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
					this.isWechat = true
			    }else{
					this.isWechat = false
			    }
			},
			login() {
				var that = this
				if (!this.checked) {
					this.$util.msg("请先确认并同意《服务条款》和《隐私协议》")
					return
				}
				this.isDisabled = true
				this.request.httpTokenRequest({
					url: "login/login",
					method: "post"
				}, {
					scene: this.loginData.scene,
					account: this.loginData.account,
					password: this.loginData.password,
					code: this.loginData.code,
					cid:that.cid
				}).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('token',res.data.token);
						uni.closeAuthView()
						// 获取当前页面栈信息
						const pages = getCurrentPages();
						if (pages.length > 1) {
						    // 存在上一页
							uni.navigateBack()
						} else {
						    // 不存在上一页或者只有一个页面（首页）
							uni.switchTab({
								url:'/pages/index/index'
							})
						}

					} else {
						this.isDisabled = false
						this.$util.msg(res.msg)
						return
					}

				}, error => {})
			}
		}
	}
</script>

<style lang="scss">
	button::after {
		border: 0;
	}
	.appleBtn {
		width: 130pt;
		height: 30pt;
		border-radius: 6pt;
		border: 0;

	}

	.appleBtn::after {
		border: 0;
	}

	.login-bg {
		width: 100%;
		min-height: 100vh;
		background: url('https://qiniu-cdn.maeiyun.com/imgs/index/sign_bg.png') no-repeat;
		background-size: 100% 100%;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
	}

	.login-content {
		background-color: rgba(255, 255, 255, 1);
		// height: 851rpx;
		border-radius: 30rpx;
		padding: 30rpx 45rpx;

		.login-title {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			color: #161617;
			line-height: 37rpx;
			text-align: center;
		}

		// 一键登录 
		.cell-phone-number {
			text-align: center;
			margin-top: 87rpx;

			.cell-phone-number-hint {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #454547;
				line-height: 28rpx;
				margin-bottom: 20rpx;

			}

		}

		// 其他登录
		.else-login-way {
			margin-top: 65rpx;

			.login-tyle-menu {
				display: flex;
				align-items: flex-start;
				justify-content: space-around;
				margin-bottom: 43rpx;

				.item-login-type {
					.login-name {
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333334;
					}

					.lines {
						width: 40rpx;
						height: 6rpx;
						background: #EF5233;
						border-radius: 4px;
						margin: 10rpx auto 0 auto;

					}

					.selectstyle {
						color: #EF5233
					}
				}
			}
		}

	}

	//手机号 输入框
	.phone-input {
		display: flex;
		align-items: center;
		height: 100rpx;
		background: #F1E3E3;
		border-radius: 30rpx;
		padding: 0 31rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;

		.left-area-code {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #787171;
			line-height: 56rpx;

			image {
				width: 16rpx;
				height: 10rpx;
				margin-left: 7rpx;
			}
		}

		.center-lines {
			width: 1rpx;
			height: 30rpx;
			background-color: #D3CACA;
			margin-left: 12rpx;
			margin-right: 40rpx;
		}

		.phone {
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			color: #000000;
		}

		.input-box-phone {
			color: #000000;
			font-size: 30rpx;
		}

		//yanzhengma
		.code-input {
			width: 70%;
			font-size: 28rpx;
		}
		button {
			border: 0;
			background-color: rgba(0, 0, 0, 0);
			padding: 0;
		}
		.sen-code-btn {
			width: 150rpx !important;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			color: #000000;
			border: 0;
		}
		
		.success-send {
			color: $uni-button-affirm-color;
			background-color: rgba(0, 0, 0, 0);
			// width: 50rpx;
			text-align: center;
		} 
		button::after {
			border: 0;
		}

		.account-icon {
			width: 26rpx;
			height: 28rpx;
			margin-right: 22rpx;
		}

		.password-icon {
			width: 25rpx;
			height: 28rpx;
			margin-right: 22rpx;
		}
		.placeholderStyle {
			color: #A89E9E;
			font-size: 28rpx;
		}

		.clear-icon {
			width: 28rpx;
			height: 28rpx;
			margin-left: auto;

		}

		.look-icon {
			width: 31rpx;
			height: 22rpx;
			margin-left: auto;
		}
	}
	//
	.hint-text{
		font-size: 20rpx;
		color: #EF5233;
		padding: 10rpx 30rpx;
		background-color: #FFFFFF;
	}

	// 登录按钮
	.login-btn {
		height: 100rpx;
		background: $uni-button-affirm-color;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}

	.three-login {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0;

		.login-img {
			width: 44rpx;
			height: 44rpx;
			margin: 0 10rpx;
		}
	}

	.login-agreement {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		color: #000000;
		padding: 0 57rpx;
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #828182;

		.choose-img {
			width: 24rpx;
			height: 24rpx;
			margin-right: 14rpx;
		}

		navigator {
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #EF5233;
		}
	}

	.else-login-btn {
		width: 360rpx;
		height: 60rpx;
		background: #F1E3E3;
		border-radius: 50rpx;
		opacity: 0.65;
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #828282;
		text-align: center;
		line-height: 60rpx;
		margin: 0 auto;
		margin-top: 169rpx;
	}

	.slider {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .6);
		z-index: 99;
		padding-bottom: 30%;
		
		.block {
			width: 80%;
			background: #FFF;
			border-radius: 26rpx;
			.title {
				width: 100%;
				height: 72rpx;
				background: #3393FF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
				position: relative;
				text {
					position: absolute;
					top: 0;
					right: 10rpx;
				}
			}
			.box {
				flex: 1;
				width: 100%;
				padding: 60rpx 20rpx;
			}
		}
	}
</style>